<template>
  <div class="pc-nodes-count flex-center">
    <div class="left">
      <div class="nodes-award flex-left-stright">
        <h1>已发放节点奖励(个)</h1>
        <p>
          140,269,236
          <span>BTY</span>
        </p>
      </div>
      <div class="day-award flex-left-stright">
        <h1>节点奖励（个/天）</h1>
        <p>
          0.9
          <span>BTY</span>
        </p>
      </div>
    </div>
    <div class="right">
      <div class="head">
        <h1>节点统计</h1>
        <div class="tab">
          <span class="active">24小时</span>
          <span>7天</span>
          <span>30天</span>
        </div>
      </div>
      <div id="myLine"></div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");
export default {
  data() {
    return {
      option: {}
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myLine = echarts.init(document.getElementById("myLine"));
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          top: "30px",
          left: "0",
          right: "30px",
          bottom: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLabel: {
              margin: 20,
              show: true,
              textStyle: {
                color: "#516379" //这里用参数代替了
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 20,
              show: true,
              textStyle: {
                color: "#516379" //这里用参数代替了
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#EAEAEA"],
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "节点个数",
            type: "line",
            stack: "总量",
            smooth: true,
            areaStyle: {
              color: "#B9CEFF"
            },
            lineStyle: {
              normal: {
                color: "#2458CD"
              }
            },
            data: [400, 200, 1000, 500, 2000, 1500, 800]
          }
        ]
      };
      myLine.setOption(this.option);
    }
  }
};
</script>

<style lang="scss" scoped>
.pc-nodes-count {
  height: calc(100% - 498px);
  background: #f8fafb;
  border-top: 1px solid #eff3f8;
  .left {
    width: 220px;
    height: 100%;
    border-right: 1px solid #e5e9ee;
    .nodes-award {
      border-bottom: 1px solid #e5e9ee;
    }
    .day-award,
    .nodes-award {
      height: 50%;
      text-align: center;
      padding-left: 20px;
      text-align: left;
      h1 {
        font-size: 14px;
        font-family: PingFangSC-Semibold;
        font-weight: 500;
        color: $black;
      }
      p {
        margin-top: 18px;
        font-size: 24px;
        font-family: PingFangSC-Semibold;
        font-weight: 500;
        color: $orange;
        span {
          font-size: 14px;
          color: $black;
        }
      }
    }
  }
  .right {
    width: calc(100% - 220px);
    height: 100%;
    padding: 25px;
    .head {
      h1 {
        font-size: 14px;
        font-family: PingFangSC-Semibold;
        font-weight: 500;
        color: $black;
        margin-bottom: 16px;
      }
      span {
        display: inline-block;
        margin-left: 50px;
        font-size: 12px;
        font-weight: 500;
        color: $black;
        cursor: pointer;
        transition: 0.3s;
      }
      span:first-child {
        margin-left: 0;
      }
      span:hover {
        color: $blue;
        opacity: 0.7;
      }
      .active {
        color: $blue;
      }
    }
    #myLine {
      height: 213px;
    }
  }
}
</style>
